import React,{Component} from 'react';
import{Icon} from 'antd-mobile';
import $ from 'jquery'
const filterOption=['全部','新店开业',"回馈客户",'打折促销']
export default  class Tools extends Component{
    state={
        order:null,
        filter:0,
        filterKey:"全部",

    };
    ChangeOrder(order){
        this.setState({
            order:order
        })
    }
    componentDidMount(){
      const $label=$(this.refs.select).children('.label');
        const $option=$(this.refs.select).children('.option');
        $label.on('touchstart',(e)=>{
            var e=e||event;
            if(e.stopPropagation){
                e.stopPropagation()
            }else{
                e.cancelBubble=true
            }
            $option.slideToggle();
        })
        $('body').on('touchstart',()=>{
            $option.slideUp();
        });
    }
    filterMenu(type,key){
        this.setState({
            filter:type,
            filterKey:key
        })
    }
    componentWillUnmount(){
        const $label=$(this.refs.select).children('.label');
        $label.off('touchstart');
    }
    render(){
        return(
                <div className="shop-tools-bar" ref="toolsbar">
                    <div className="tools-select" ref="select">
                        <p className="label">{this.state.filterKey}<span className="icon"></span></p>
                        <ul className="option" style={{width:document.documentElement.clientWidth}}>
                            {filterOption.map((key,i)=>{
                                return <li className={this.state.filter==i?"selected":""}  key={i}onClick={()=>this.filterMenu(i,key)}>
                                    {key}
                                    {this.state.filter==i?(<Icon type="check"></Icon>):null}
                                </li>
                            })}
                        </ul>
                    </div>
                    <div
                        className={this.state.order=="hot"?"tools-filter selected":"tools-filter"}
                        onClick={()=>this.ChangeOrder('hot')} >
                        热门
                    </div>
                    <div
                        className={ this.state.order=="new"?"tools-filter selected":"tools-filter"}
                        onClick={()=>this.ChangeOrder('new')} >
                        最新
                    </div>
                </div>

        )
    }
}
